<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    BFC(Block formatting context)直译为"块级格式化上下文"
    它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
    <!-- margin重叠(因为他们两个div在同一个BFC) -->
    <div style="margin-bottom:10px">a</div>
    <div style="margin-top:10px">b</div>

    <!-- 解决方式：再包一层,然后设置overflow:hidden -->
    <div style="overflow: hidden;"><div style="margin-bottom:10px">a</div></div>
   <div style="margin-top:10px;overflow: hidden;">b</div>

</body>
</html>